<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-examine-details-container" ref="warpper">
      <div class="content">
        <ul class="vm-common-container pl40">
          <li class="vm-common-item">
            <div class="vm-common-item-l">
              <h6>招标编号</h6>
            </div>
            <div class="vm-common-item-r">
              <p>GG_20180522950</p>
            </div>
          </li>
          <li class="vm-common-item">
            <div class="vm-common-item-l">
              <h6>公告主体</h6>
            </div>
            <div class="vm-common-item-r">
              <p>关于七宝镇asdasd安全网而且我打算大收发文人情味而且卫栖梧额是否撒大声地</p>
            </div>
          </li>
          <li class="vm-common-item">
            <div class="vm-common-item-l">
              <h6>责任人</h6>
            </div>
            <div class="vm-common-item-r">
              <p>贾轲</p>
            </div>
          </li>
          <li class="vm-common-item">
            <div class="vm-common-item-l">
              <h6>公告期</h6>
            </div>
            <div class="vm-common-item-r">
              <p>30天</p>
            </div>
          </li>
          <li class="vm-common-item">
            <div class="vm-common-item-l">
              <h6>开标时间</h6>
            </div>
            <div class="vm-common-item-r">
              <p>2018-06-21 14:43:45</p>
            </div>
          </li>
          <li class="vm-common-item">
            <div class="vm-common-item-l">
              <h6>招标方式</h6>
            </div>
            <div class="vm-common-item-r">
              <p>招投标</p>
            </div>
          </li>
          <li class="vm-common-item material">
              <h6>采购物资</h6>
              <div class="item-material">
                <div class="item-material-h">
                  <h6>塑料绝缘控制电缆</h6>
                </div>
                <div class="item-material-b">
                  <div class="material-b-l">
                    <img src="../../../static/images/box.png" alt="">
                  </div>
                  <div class="material-b-r">
                    <p>
                      物料编码：<span>30231564123</span>
                    </p>
                    <p>
                      规格：<span>QDQW-FDSA65</span>
                    </p>
                    <p>
                      数量：<span>8</span>
                    </p>
                  </div>
                </div>
              </div>
          </li>
          <li class="vm-common-item material">
            <h6>采购物资</h6>
            <div class="item-material">
              <div class="item-material-h">
                <h6>塑料绝缘控制电缆</h6>
              </div>
              <div class="item-material-b">
                <div class="material-b-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="material-b-r">
                  <p>
                    物料编码：<span>30231564123</span>
                  </p>
                  <p>
                    规格：<span>QDQW-FDSA65</span>
                  </p>
                  <p>
                    数量：<span>8</span>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li class="vm-common-item material">
            <h6>采购物资</h6>
            <div class="item-material">
              <div class="item-material-h">
                <h6>塑料绝缘控制电缆</h6>
              </div>
              <div class="item-material-b">
                <div class="material-b-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="material-b-r">
                  <p>
                    物料编码：<span>30231564123</span>
                  </p>
                  <p>
                    规格：<span>QDQW-FDSA65</span>
                  </p>
                  <p>
                    数量：<span>8</span>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div :class="['vm-examine-details-f',examineType != 0 ? 'n' : '']">
          <mt-button plain @click="popupVisible = !popupVisible">审批详情</mt-button>
          <mt-button type="primary" v-if="examineType == 0">审批</mt-button>
        </div>
      </div>
    </div>
    <mt-popup
      v-model="popupVisible"
      position="center"
      >
        <mt-swipe
          :showIndicators="false"
          :continuous="false">
          <mt-swipe-item>
            <div class="examinee-process-warp">
              <div class="examinee-process-h">
                <h6>审批编号：XXXXXXXXXXXXX</h6>
                <span>X</span>
              </div>
              <div class="examine-process-b">
                <div class="examine-process-item">
                  <div class="examinee-b-l">
                    徐波波
                  </div>
                  <div class="examinee-b-r">
                    <div class="examinee-r-t">
                      <em>同意</em>
                      <span>2018-05-30 16:34:07</span>
                    </div>
                    <div class="examinee-r-b">
                      <p>同意此公告，司法司法所答搜的就爱哦圣诞节群殴我所答搜的就爱哦圣诞节群殴我</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </mt-swipe-item>
        </mt-swipe>
    </mt-popup>

  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import vmCommonHeader from '@/components/vm-common-header.vue'
  export default {
    data () {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        examineId: this.$route.params.id,
        examineType: this.$route.query.type,
        popupVisible: false
      }
    },
    created () {
      console.log(this.examineType);
    },
    components: {
      'vm-common-header': vmCommonHeader
    },
    mounted() {
      this.$nextTick(() => {
        if ( !this.scroll ) {
          this.scroll = new BScroll(this.$refs.warpper,{
            click: true,   //是否派发click事件
            scrollbar: false
          });
        } else {
          this.scroll.refresh()
        }
      })
    }
  }
</script>

<style lang="scss">
.vm-examine-details-container {
  background-color: #f4f4f4;
  height: 100%;
}
ul.vm-common-container {
  margin-top: 20px;
  background-color: #ffffff;
}
.vm-examine-details-f {
  display: flex;
  height: 150px;
  width: 100%;
  padding: 0 30px;
  align-items: center;
  button {
    border-radius: 10px; /* no */
    height: 85px;
    flex: 1;
    font-size: 32px;
  }
  button:nth-child(1) {
    background-color: #ffffff;
    border: 2px solid #46a8fc; /* no */
    margin-right: 30px;
    color: #83c2ff;
  }
  button:nth-child(2) {
    background-color: #46a8fc;
    border: 2px solid #46a8fc; /* no */
    margin-right: 30px;
    color: #fff;
  }
  &.n {
    button {
      background-color: #46a8fc;
      border: 2px solid #46a8fc; /* no */
      margin-right: 30px;
      color: #fff;
    }
  }
}
/* 审批详情 */
.mint-popup.mint-popup-center {
  width: 580px;
  height: 1000px;
  border-radius: 15px; /* no */
  .mint-swipe-items-wrap {
    width: 580px;
    border-radius: 15px; /* no */
    .mint-swipe-item {
      border-radius: 15px; /* no */
      background-color: #fff;
      width: 580px;
      .examinee-process-warp {
        padding: 0 30px;
        .examinee-process-h {
          height: 100px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          h6,span {
            font-size: 30px;
            color: #000;
          }
        }
        .examine-process-b {
          height: 100%;
          .examine-process-item {
            display: flex;
            .examinee-b-l {
              width: 100px;
              height: 100px;
              border-radius: 50%;
              background-color: #d9261d;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 26px;
              color: #fff;
              margin-right: 30px;
              position: relative;
              &::before {
                content: '';
                background-color: #aaaaaa;
                width: 4px;
                height: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: 50px;
              }
            }
            .examinee-b-r {
              flex: 1;
              display: flex;
              flex-direction: column;
              .examinee-r-t{
                display: flex;
                justify-content: space-between;
                em {
                  color: #1ac6b1;
                  font-size: 24px ;
                }
                span {
                  font-size: 16px;
                  color: #999999;
                }
              }
              .examinee-r-b{
                display: flex;
                text-align: left;
                p {
                  color: #333;
                  font-size: 22px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 3;
                  word-break: break-word;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
